<template>
  <div class="gray-page record-page log-page">
    <nav-bar title="工作任务"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.taskOrPlan" @change="tabChange">
          <van-tab v-for="(item, key) in tab" :key="key" :title="item.description" :name="item.code"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky :offset-top="88">
        <van-search
          placeholder="多条件检索"
          background="#F6F6F6"
          :left-icon="searchLeftIcon"
          clearable
          @focus="onSearch"
        />
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="140">
        <task-list ref="taskList" :searchForm="searchForm"></task-list>
      </van-sticky>
      <img
        v-show="searchForm.taskOrPlan === '2'"
        class="task-add"
        src="@/assets/images/routine/workTasks/task_add@2x.png"
        alt=""
        @click="taskAdd"
      />
    </div>
    <van-popup v-model="popUpshow" position="right" :style="{ height: '100%', width: '90%' }">
      <div class="pop-top">
        <p>筛选</p>
        <p @click="emptyClick">清空</p>
      </div>
      <div class="pop-content">
        <div class="event-conditions-box">
          <p class="event-status-title">优先级</p>
          <div class="event-status-box">
            <div
              class="event-status"
              :class="{ eventstatusActive: taskPriorityIndex === index }"
              v-for="(item, index) in taskPriority"
              :key="index"
              @click="taskPriorityClick(item, index)"
            >
              {{ item.description }}
            </div>
          </div>
          <p class="event-status-title">状态</p>
          <div class="event-status-box disposal-department">
            <div
              class="event-status"
              :class="{ eventTypeActive: taskStatusIndex === index }"
              v-for="(item, index) in taskStatus"
              :key="index"
              @click="taskStatusClick(item, index)"
            >
              {{ item.description }}
            </div>
          </div>
          <p class="event-status-title">截止时间</p>
          <div class="reporting-time">
            <van-field
              readonly
              clickable
              name="expirationData"
              v-model="searchForm.startDeadline"
              placeholder="请输入开始时间"
              @click="dateOpenPopup('1')"
            />
            <p>-</p>
            <van-field
              readonly
              clickable
              name="expirationData"
              v-model="searchForm.endDeadline"
              placeholder="请输入结束时间"
              @click="dateOpenPopup('2')"
            />
          </div>
        </div>
      </div>
      <div class="pop-bottom">
        <button @click="emptyClick">清空</button>
        <button @click="determine">确定</button>
      </div>
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="datePopupShow" round position="bottom" @close="date = new Date()">
      <van-datetime-picker
        v-model="date"
        type="date"
        title="选择年月日"
        @cancel="datePopupShow = false"
        @confirm="dateOnConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import Public from '@/api/public'
import TaskList from '@/components/Widget/Routine/WorkTasks/list'
import List from '@/mixins/list'
import Routine from '@/api/routine'
export default {
  mixins: [List],
  components: {
    TaskList
  },
  data() {
    return {
      api: Routine.Task,
      tab: [
        {
          description: '领导任务',
          code: '1'
        },
        {
          description: '工作计划',
          code: '2'
        }
      ],
      searchForm: {
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        taskOrPlan: '1',
        startDeadline: '',
        endDeadline: '',
        taskPriority: '',
        taskStatus: ''
      },
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      popUpshow: false,
      taskPriority: [],
      taskStatus: [],
      taskPriorityIndex: -1,
      taskStatusIndex: -1,
      dictTypes: 'degreeConcern,taskStatus',
      date: '',
      datePopupShow: false
    }
  },
  mounted() {
    // 字典项
    this.getDict(this.dictTypes)
  },
  methods: {
    tabChange() {
      this.searchForm.startDeadline = ''
      this.searchForm.endDeadline = ''
      this.searchForm.taskPriority = ''
      this.searchForm.taskStatus = ''
      this.$refs.taskList.listData = []
      console.log(this.searchForm)
      this.$refs.taskList.getList()
    },
    getDict(type) {
      Public.Init.init({ type }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.taskPriority = data.degreeConcern
          this.taskStatus = data.taskStatus
        }
      })
    },
    onSearch() {
      this.searchForm.startDeadline = ''
      this.searchForm.endDeadline = ''
      this.searchForm.taskPriority = ''
      this.searchForm.taskStatus = ''
      this.taskPriorityIndex = -1
      this.taskStatusIndex = -1
      this.popUpshow = true
    },
    // 清空
    emptyClick() {
      this.searchForm.startDeadline = ''
      this.searchForm.endDeadline = ''
      this.taskPriorityIndex = -1
      this.taskStatusIndex = -1
    },
    // 优先级点击
    taskPriorityClick(item, index) {
      this.taskPriorityIndex = index
      this.searchForm.taskPriority = item.code
    },
    // 状态点击
    taskStatusClick(item, index) {
      this.taskStatusIndex = index
      this.searchForm.taskStatus = item.code
    },
    dateOpenPopup(item) {
      if (item === '1') {
        this.timedivision = 1
      } else {
        this.timedivision = 2
      }
      this.datePopupShow = true
    },
    dateOnConfirm(val) {
      const year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      if (this.timedivision === 1) {
        this.searchForm.startDeadline = `${year}-${month}-${day}`
      } else {
        this.searchForm.endDeadline = `${year}-${month}-${day}`
      }
      this.datePopupShow = false
    },
    determine() {
      this.popUpshow = false
      this.$refs.taskList.getList(1)
    },
    taskAdd() {
      console.log(111)
      this.$router.push('/routine/workTasks/plan')
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/routine/workTasks/index.less';
</style>
